<template>
  <div>
    <div class="u2598_account ax_default box_1">
      <div class="u2598_div_account"></div>
    </div>
    <div id="evaluate_div">
      <h4>用户评价</h4>
      <!-- 评价列表 -->
      <div class="comment-list">
        <el-table
            :data="comments"
            style="width: 100%"
            max-height="550">
          <el-table-column
              fixed
              prop="contentId"
              label="订单编号"
              width="50">
          </el-table-column>
          <el-table-column
              prop="content"
              label="评价内容"
              width="240">
          </el-table-column>
          <el-table-column
              prop="flowerName"
              label="商品名"
              width="100">
          </el-table-column>
          <el-table-column
              prop="buyCount"
              label="购买数量"
              width="60">
          </el-table-column>
          <el-table-column
              prop="subTotal"
              label="小计"
              width="60">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间"
              width="150">
          </el-table-column>
          <el-table-column prop="commentImg" label="评论图片" width="120">
            <template slot-scope="scope">
              <el-image :src="'http://localhost:8088/image/Test/' + scope.row.commentImg" class="custom-image">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
              prop="rateScore"
              label="评分"
              width="150">
            <template slot-scope="scope">
              <el-rate disabled :value="scope.row.rateScore" :colors="colors"/>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="danger" @click="deleteComment(scope.row.contentId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total" style="position: relative;top: 25px;left: 250px">
        </el-pagination>

      </div>

    </div>


    <br/><br/><br/><br/>
    <br/><br/><br/><br/>
    <br/><br/><br/><br/>
  </div>
</template>

<script>

import {Message} from "element-ui";

export default {
  name: 'CommentView',
  data() {
    return {
      comments: [],
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
      currentPage: 1, // 当前页码
      pageSize: 5, // 每页显示条数
      total: 0 // 总数据条数
    };
  },
  methods: {
    // 获取所有评价数据
    getCommentsByPage() {
      let accountId = sessionStorage.getItem("accountId");
      const formData = {
        accountId: accountId,
        pageNum: this.currentPage,  // 发送当前页码
        pageSize: this.pageSize  // 发送每页条数
      }
      console.log(accountId);
      this.$axios.post("/evaluate/getEvaluateListToPage", formData)
          .then(response => {
            this.comments = response.data;
          })
          .catch(error => {
            console.error('获取评价数据出错:', error);
          });
    },
    getComments() {
      let accountId = sessionStorage.getItem("accountId");
      this.$axios.get(`/evaluate/getEvaluateList/${accountId}`)
          .then(response => {
            this.total = response.data.length;
          })
          .catch(error => {
            console.error('获取评价数据出错:', error);
          });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getCommentsByPage();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getCommentsByPage();
    },
    deleteComment(commentId) {
      this.$axios.delete(`/evaluate/deleteComment/${commentId}`)
          .then(response => {
            if (response.data.code===200) {
              Message({
                type: "success",
                message: response.data.msg,
                duration: 1000
              })
              this.getCommentsByPage();
            } else {
              console.error('删除评论失败');
            }
          })
          .catch(error => {
            console.error('删除评论出错:', error);
          });
    }
  },
  created() {
    this.getComments();
    this.getCommentsByPage();
  }
};
</script>

<style scoped>

#evaluate_div {
  position: absolute;
  top: 160px;
  left: 220px;
}

.custom-image {
  width: 60px;
  height: 60px;
}
</style>